<template>
  <div class="ActivityList">
    <!-- <van-nav-bar
      :title="pageTitle"
      left-arrow
      @click-left="backHome"
    />-->
    <nav-bar :title="pageTitle"></nav-bar>
    <div class="ActivityList-swiper">
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in swiper" :key="index">
          <img class="ActivityList-swiper-img" :src="item.imgUrl" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- animated swipeable -->
    <div class="ActivityList-tab wrap">
      <van-tabs
        v-model="selectIndex"
        @click="tabsClick"
        sticky
        title-active-color="#0050A5"
        color="#0050A5"
      >
        <van-tab
          v-for="(tab, tabKey) in tabs"
          title-style="font-size:16x;"
          :key="tabKey"
          :title="tab.title"
        >
          <van-list
            v-model="tab.loading"
            :finished="tab.finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <activity-item :list="tab.list"></activity-item>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
    <!-- <div class="ActivityList">
      <van-divider :style="{ color: '#0050A5', borderColor: '#BFBFBF', padding: '0 16px' }">查看更多</van-divider>
    </div>-->
  </div>
</template>

<script>
import activityItem from '@/components/activity/activityItem'
import navBar from '@/components/NavBar'
export default {
  name: 'ActivityList',
  components: {
    activityItem,
    navBar,
  },
  data() {
    return {
      swiper: [],
      imgUrl: config.imgUrl,
      pageTitle: '参加的活动',
      selectIndex: 0,
      loading: false,
      finished: false,
      tabs: [
        {
          title: '参加的活动',
          loading: false,
          finished: false,
          list: [],
          param: {
            page: 0,
            pageSize: 20,
          },
        },
        {
          title: '创建的活动',
          loading: false,
          finished: false,
          list: [],
          param: {
            page: 0,
            pageSize: 20,
          },
        },
      ],
    }
  },
  methods: {
    backHome() {
      this.$router.back()
    },
    skipRouter(routerObj) {
      this.$router.push(routerObj)
    },
    onLoad() {
      this.findList()
    },
    tabsClick(index, title) {
      this.pageTitle = title
    },
    findList() {
      let url = ['selectParticipateInActivities', 'userFindWaitAuditActivity']
      this.tabs[this.selectIndex].param.page++
      this.$request({
        url: '/activity/' + url[this.selectIndex],
        method: 'post',
        data: this.tabs[this.selectIndex].param,
      }).then((rsp) => {
        if (rsp.code === 200) {
          if (this.tabs[this.selectIndex].param.page === 1) {
            this.tabs[this.selectIndex].list = rsp.data.list
          } else {
            this.tabs[this.selectIndex].list.splice(-1, 0, ...rsp.data.list)
          }

          this.tabs[this.selectIndex].loading = false
          if (this.tabs[this.selectIndex].list.length >= rsp.data.total) {
            this.tabs[this.selectIndex].finished = true
          } else {
            this.tabs[this.selectIndex].finished = false
          }
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
    findBanner() {
      this.$request({
        url: '/advertising/search',
        method: 'post',
        data: { category: 11 },
      }).then((rsp) => {
        if (rsp.code === 200) {
          let swList = JSON.parse(rsp.data[0].imgUrlList)
          swList.forEach((item) => {
            item.imgUrl = config.imgUrl + item.imgUrl
          })
          console.log(swList, '头部banner', config.imgUrl)
          this.swiper = swList
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
  },
  mounted() {
    const type = this.$route.query.activityType
    this.selectIndex = type
    this.pageTitle = this.tabs[type].title
    this.findBanner()
  },
}
</script>

<style lang='scss'>
@import '../assets/css/base';

.ActivityList {
  &-swiper {
    &-img {
      width: 100%;
      height: px2rem(330);
    }
  }
  &-tab {
    // &-item{
    //   display: flex;
    //   margin-top: px2rem(30);
    //   &>img{
    //     width: px2rem(295);
    //     height: px2rem(194);
    //     border-radius: px2rem(5);
    //     margin-right: px2rem(28);
    //   }
    //   &>.txt{
    //     display: flex;
    //     flex-direction: column;
    //     width:px2rem(360);
    //     &>.title{
    //       color: #000000;
    //       font-size: px2rem(28);
    //       margin-bottom: px2rem(10);
    //     }
    //     &>.user, &>.location, &>.date{
    //       color: #5A5A5A;
    //       font-size: px2rem(24);
    //       line-height: 1.7;
    //     }
    //     &>.fire{
    //       margin-top: px2rem(10);
    //       @include bgImg(px2rem(150), px2rem(30), '../assets/img/activity/fire.png');
    //       background-position: left center;
    //       line-height: px2rem(30);
    //       padding-left: px2rem(35);
    //       font-size: px2rem(20);
    //       color: #ff0000;
    //     }
    //   }
    // }
  }
  &-more {
    height: px2rem(50);
    width: 100%;
  }
}
</style>
